<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>querySelector</title>
    </head>
    <body>
        <!-- querySelector()方法的功能是通过选择器得到元素 -->
        <!-- 注意事项
                - querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素
                - querySelector()方法从IE9开始支持CSS3的选择器，如：nth-child()、:[src^='dog']等CSS3选择器形式都支持良好
        -->

        <div id="box">
            <p>我是段落</p>
            <p class="spec">我是段落</p>
            <p>我是段落</p>
        </div>
        <script>
            var  the_p  = document.querySelector('#box .spec');
           

            // var the_p = document.querySelector('#box p:nth-child(1)');


            console.log(the_p);
        </script>
    </body>
</html>